<template>
	<view>
		<!-- 聊天气泡 -->
		<scroll-view id="scrollView" scroll-y="true" :scroll-top="scrolltop" :scroll-with-animation="true"
		:style="{height:style.contentH+'px'}" show-scrollbar="true">
			<block v-for="(item,index) in arr" :key="index">
				<userChatList :item="item" :index="index"></userChatList>
			</block>
		</scroll-view>
		<!-- 输入框 -->
		<userChat @submit="submit"></userChat><!-- submit为子组件定义的事件方法 -->
	</view>
</template>

<script>
	import userChat from "../../components/userchat/user-chat.vue";
	import userChatList from "../../components/userchat/user-chat-list.vue";
	import time from "../../common/time.js";
	export default {
		components:{
			userChat,
			userChatList
		},
		data(){
			return{
				name:'',
				text:'',
				arr:[],
				scrolltop:0,
				style:{
					contentH:0,
					saveH:0
				},
				socketOpen:false,
				
			}
		},
		onLoad() {
			
			this.getmessage();
			this.initgetHeight();
			this.name = uni.getStorageSync('name');
			// this.	connectSocketInit();
		},
		onReady() {
			this.getdomH();
		},
		methods:{
		    //获取可用高度
			initgetHeight(){
				try {
				    const res = uni.getSystemInfoSync();
				  //  console.log(res.windowHeight);
					this.style.contentH=res.windowHeight-uni.upx2px(120);
					//console.log(this.style.contentH)
				} catch (e) {
				    // error
				}
			},
			//获取dom节点
			getdomH(){
				const query = uni.createSelectorQuery();
				query.select('#scrollView').boundingClientRect();
				query.selectAll('.chat-big').boundingClientRect();
				query.exec((res)=>{
					res[1].forEach((ret)=>{ 
					  this.style.saveH+=ret.height;
					  if(this.style.contentH < this.style.saveH){
						  this.scrolltop=this.style.saveH;
					  }
					})
				})
				/* query.selectAll("#scrollView .chat-big").boundingClientRect(data => {
				//  console.log("得到布局位置信息" + JSON.stringify(data));
				 // console.log("节点离页面顶部的距离为" + data.top);
				  data.forEach((ret)=>{
					  this.style.saveH+=ret.height;
					  if(this.style.contentH < this.style.saveH){
						  this.scrolltop=this.style.saveH;
					  }
				  })
				}).exec(); */
			},
			//从服务器获取聊天
			getmessage(){
				let list=[
					{   
						isme:false,
						userpic:'../../static/userpic/11.jpg',
						type:'text',
						data:'哈哈',
						time:'1584343652'
					},
					{
						isme:true,
						userpic:'../../static/img/597.png',
						type:'img',
						data:'../../static/datapic/12.jpg',
						time:'1584343992'
					},
					{
						isme:true,
						userpic:'../../static/img/597.png',
						type:'img',
						data:'../../static/datapic/12.jpg',
						time:'1584343992'
					}
				];
				for (var i=0; i<list.length; i++) {
					list[i].persontime=time.gettime.getChatTime(list[i].time,
					i>0? list[i-1].time:0)
				}
				this.arr=list;
			},
			submit(data){
				console.info("客户端发送的消息:"+data)
				// console.log(this.name)
				let now=new Date().getTime();
				let obj={
						isme:true,
						userpic:'../../static/img/597.png',
						type:'text',
						data: data,
						time:now,
						persontime:time.gettime.getChatTime(now,this.arr[this.arr.length-1].time)
					};
					
				this.arr.push(obj);
				this.getdomH();
				if (this.value == '') {
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '不能发送空白消息'
					});
				} else {
					var _self = this;
					var ok = JSON.stringify({
						to: this.name, //1.获取点击后的
						username: this.name,
						message: data
					});
					uni.sendSocketMessage({
						data: ok,
						success: function() {
							//消息发送给谁了
							uni.onSocketMessage(function(res) {
								var ret = JSON.parse(res.data);
								console.info("收到服务消息："+res)
								// _self.list.push({
								// 	con: ret.message,
								// 	ss: ret.username
								// });
								// for (var s = 0; s < _self.list.length; s++) {
								// 	if (_self.list[s].ss == uni.getStorageSync('name')) {
								// 		_self.start = true;
								// 		_self.value = '';
								// 	} else {
								// 		_self.start = false;
								// 	}
								// }
								// // 初始化
								// _self.value = '';
							});
						},
						fail: function() {
							uni.showToast({
								icon: 'none',
								position: 'bottom',
								title: '数据发送失败'
							});
						}
					});
				}
			}
		}
	}
</script>

<style>
/* ::-webkit-scrollbar {  
	    width: 3px !important; 
		height: 0 !important;  
		-webkit-appearance: none;  
	    background: blue;  
	} */
</style>
